<template>
    <div class="login-container">
        <el-card class="card">
            <div class="login-body">

                <div class="login-title" @click="toIndex">
                    <b style="color: black;display: inline-block; margin-bottom: 20px;font-size: 28px;">
                        校园二手交易平台
                    </b>
                </div>

                <el-form ref="form" :model="userForm">
                    <el-input placeholder="请输入账号" v-model="userForm.accountNumber" class="login-input">
                        <template slot="prepend">
                            <div class="el-icon-user" style="font-size: 24px;"></div>
                        </template>
                    </el-input>
                   
                    <el-input placeholder="请输入密码" v-model="userForm.userPassword" class="login-input"
                        @keyup.enter.native="login" show-password>
                        <template slot="prepend">
                            <div class="el-icon-lock" style="font-size: 24px;"></div>
                        </template>
                    </el-input>

                   <div class="captcha-container">
                       <el-input placeholder="请输入验证码" v-model="userForm.captcha" class="login-input captcha-input">
                           <template slot="prepend">
                               <div class="el-icon-picture" style="font-size: 24px;"></div>
                           </template>
                       </el-input>
                       <img :src="captchaUrl" @click="refreshCaptcha" class="captcha-image" style="cursor: pointer;">
                   </div>

                   
                    <div class="login-submit">
                        <el-button  @click="login"  class="login"> 登录</el-button>
                        <el-button  @click="$router.push('/sign-in')" class="register"> 注册</el-button>
                    </div>
                    
                    <div class="other-submit">
                        <router-link to="/login-admin" class="sign-in-text"> 管理员登录</router-link>
                    </div>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "login",//定义Vue组件的名称为"login"
    data() {//data这个对象包含了组件的初始数据
        return {
            userForm: {
                accountNumber: '',
                userPassword: '',
                captcha: ''
            },
            captchaUrl: 'http://localhost:9321/captcha/get'//获取验证码图片的URL地址
        };
    },

    methods: {
        login() {
            this.$api.userLogin({//调用登录接口
                accountNumber: this.userForm.accountNumber,
                userPassword: this.userForm.userPassword,
                captcha: this.userForm.captcha//图形验证码
            }).then(res => {//接口返回的数据
                console.log(res);
                if (res.status_code === 1) {
                    if (res.data.userAllow !== 1) {
                        this.$message.error("您的账户未经过管理员同意，无法登录");//弹出提示
                    } else {//管理员允许登录，登录成功
                        res.data.signInTime = res.data.signInTime.substring(0, 10);
                        this.$globalData.userInfo = res.data;
                        this.$router.replace({ path: '/index' });//跳转到首页
                    }
                } else {
                    this.$message.error(res.msg);//弹出提示
                }
            }).catch((e) => {
                console.log(e)
                if (e.response == undefined || e.response.data == undefined) {//判断是否有返回数据，不存在执行if分支
                    this.$message({//弹出提示
                        showClose: true,//是否显示关闭按钮
                        message: e,//提示内容
                        type: "error",//提示类型
                        duration: 20000,//显示时间
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: e.response.data,
                        type: "error",
                        duration: 20000,
                    });
                }
            });
        },

        refreshCaptcha() {//刷新验证码
            this.captchaUrl = 'http://localhost:9321/captcha/get?' + Math.random();
        },
        toIndex() {
            this.router.push('/index');
        }
    }
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: auto;
    background: url("../../assets/background.jpg") center top / cover no-repeat;
}
.card {
    border-radius: 20px;
    height: 500px;
}
.login-body {
    padding: 30px;
    width: 300px;
    height: 100%;
}
.login-title {
    padding-bottom: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #409EFF;
    cursor: pointer;
}
.login-input {
    margin-bottom: 20px;
}
.login-submit {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.sign-in-submit {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.sign-in-container {
    padding: 0 10px;
}
.sign-in-text {
    color: #409EFF;
    font-size: 16px;
    text-decoration: none;
    line-height: 28px;
}
.other-submit {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-left: 200px;
}
.register {
    background-color: #3d96ee;
    color: white;
    border: none;
    border-radius: 20px;
    margin-left: 30px;
}
.register:hover {
    background-color: #409EFF;
    color: white;
}
.login {
    background-color: #76c794;
    color: white;
    border: none;
    border-radius: 20px;
}
.login:hover {
    background-color: #85d27a;
    color: white;
}
.captcha-container {
    display: flex;
    align-items: stretch; /* 子元素高度拉伸至相同高度 */
    margin-bottom: 20px; /* 保持与其他输入框间距一致 */
}

/* 设置验证码输入框的样式 */
.captcha-input {
    flex: 1; /* 占据剩余空间 */
    margin-right: 10px; /* 输入框和图片之间的间距 */
    width: calc(100% - 120px); /* 根据需要调整宽度 */
}

/* 图形验证码的样式 */
.captcha-image {
    height: 40px; /* 与输入框高度匹配 */
    border-radius: 5px; /* 可选：给图片添加圆角 */
    cursor: pointer;
    width: 110px; /* 设置固定宽度 */
}

/* 覆盖默认的 el-input 样式，使其高度为 40px 并确保 placeholder 显示完整 */
.login-input input.el-input__inner {
    height: 40px !important; /* 强制设置输入框高度 */
    padding-left: 40px !important; /* 确保有足够的空间显示 placeholder */
}
</style>
